<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <!-- 接单开关 -->
      <view class="swich">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333">是否开启接单</view>
        <switch color="#3553E8" :checked="singly == 2" style="transform: scale(0.7)" @change="swichchange" />
      </view>
      <!-- 可授课时间 -->
      <view style="margin: 28rpx 0 0rpx 30rpx; font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">
        可授课时间
        <text style="font-size: 26rpx; color: #ccc; padding-left: 20rpx">(长按可删除时间)</text>
      </view>
      <view class="item" v-for="(item1, index1) in data" :key="index1">
        <view class="title">{{ item1.name }}</view>
        <view class="timebox">
          <!-- startTime, endTime -->
          <view @longpress="del(index1, index2)" @click="changetime(index1, index2)" class="time" v-for="(item, index2) in item1.list" :key="index2">
            {{ item.time_slot }}
            <uni-icons type="clear" size="20" color="red" class="del" v-show="item.delstatus" @click.native.stop="deltime(index1, index2)"></uni-icons>
          </view>
          <image @click="add(index1)" src="../../static/icon/add.png" mode="aspectFill" style="width: 50rpx; height: 50rpx; margin-top: 16rpx"></image>
        </view>
      </view>
    </scroll-view>
    <!-- 可授课范围 -->
    <view class="long">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333; margin-bottom: 30rpx">可授课范围</view>
      <uni-data-select v-model="value" placeholder="请选则距离范围" :localdata="range" @change="longchange"></uni-data-select>
    </view>
    <view class="submit"></view>

    <!-- 选择时间弹框 -->
    <uni-popup ref="time" type="bottom">
      <view class="choosetimebox">
        <view style="display: flex; justify-content: space-between">
          <text @click="$refs.time.close()">取消</text>
          <text>添加范围时间</text>
          <text @click="fnok">确认</text>
        </view>
        <picker-view indicator-style="height: 50px" style="height: 400rpx; padding: 0 80rpx" :value="value2" @change="bindChange">
          <!-- 开始时间 -->
          <picker-view-column>
            <view v-for="(item, index) in starthours" :key="index" style="text-align: center; line-height: 100rpx; color: #3553e8">{{ item }}</view>
          </picker-view-column>
          <view style="height: 400rpx; line-height: 400rpx; color: #3553e8">:</view>
          <picker-view-column>
            <view v-for="(item, index) in startminutes" :key="index" style="text-align: center; line-height: 100rpx; color: #3553e8">{{ item }}</view>
          </picker-view-column>
          <view style="height: 400rpx; line-height: 400rpx; color: #000">————</view>
          <!-- 结束时间  -->
          <picker-view-column>
            <view v-for="(item, index) in endhours" :key="index" style="text-align: center; line-height: 100rpx; color: #3553e8">{{ item }}</view>
          </picker-view-column>
          <view style="height: 400rpx; line-height: 400rpx; color: #3553e8">:</view>
          <picker-view-column>
            <view v-for="(item, index) in endminutes" :key="index" style="text-align: center; line-height: 100rpx; color: #3553e8">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      singly: '', // 开关
      week: '', // 当前的周几
      time_slot: '', //时间段
      range: '', // 接单范围
      distance: '', // 距离
      value: 0,
      range: [
        { value: '5Km以内', text: '5Km以内' },
        { value: '5Km-10Km', text: '5Km-10Km' },
        { value: '10Km以外', text: '10Km以外' }
      ],
      currentindex1: '',
      currentindex2: '',
      currentvalue: [],
      data: [
        {
          name: '周一',
          list: [
            // {
            //   startTime: '08:00',
            //   endTime: '12:00',
            //   delstatus: false
            // },
            // { startTime: '08:00', endTime: '12:00', delstatus: false }
          ]
        },
        {
          name: '周二',
          list: [
            // {
            //   startTime: '08:00',
            //   endTime: '12:00',
            //   delstatus: false
            // },
            // { startTime: '08:00', endTime: '12:00', delstatus: false }
          ]
        },
        {
          name: '周三',
          list: [
            // {
            //   startTime: '08:00',
            //   endTime: '12:00',
            //   delstatus: false
            // },
            // { startTime: '08:00', endTime: '12:00', delstatus: false }
          ]
        },
        {
          name: '周四',
          list: [
            // {
            //   startTime: '08:00',
            //   endTime: '12:00',
            //   delstatus: false
            // },
            // { startTime: '08:00', endTime: '12:00', delstatus: false }
          ]
        },
        {
          name: '周五',
          list: [
            // {
            //   startTime: '08:00',
            //   endTime: '12:00',
            //   delstatus: false
            // },
            // { startTime: '08:00', endTime: '12:00', delstatus: false }
          ]
        },
        {
          name: '周六',
          list: []
        },
        {
          name: '周日',
          list: [
            // { startTime: '08:00', endTime: '12:00', delstatus: false },
          ]
        }
      ],
      value2: [0, 0, 0, 0],
      starthours: ['00', ' 01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
      startminutes: [
        '00',
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23',
        '24',
        '25',
        '26',
        '27',
        '28',
        '29',
        '30',
        '31',
        '32',
        '33',
        '34',
        '35',
        '36',
        '37',
        '38',
        '39',
        '40',
        '41',
        '42',
        '43',
        '44',
        '45',
        '46',
        '47',
        '48',
        '49',
        '50',
        '51',
        '52',
        '53',
        '54',
        '55',
        '56',
        '57',
        '58',
        '59',
        '60'
      ],
      endhours: ['00', ' 01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
      endminutes: [
        '00',
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23',
        '24',
        '25',
        '26',
        '27',
        '28',
        '29',
        '30',
        '31',
        '32',
        '33',
        '34',
        '35',
        '36',
        '37',
        '38',
        '39',
        '40',
        '41',
        '42',
        '43',
        '44',
        '45',
        '46',
        '47',
        '48',
        '49',
        '50',
        '51',
        '52',
        '53',
        '54',
        '55',
        '56',
        '57',
        '58',
        '59',
        '60'
      ]
    };
  },
  methods: {
    // 获取时间列表
    async gettimelist() {
      const res = await uni.$http.post('/teacher/setupList');
      console.log('接单的时间列表', res.data.data.list);
      this.data = res.data.data.list;
      this.data.forEach((item) => {
        item.list.forEach((item2) => {
          Vue.set(item2, 'delstatus', false);
        });
      });
      this.singly = res.data.data.singly;
      this.value = res.data.data.range_id;
    },
    //获取可接课的范围
    async getdistance() {
      this.range = [];
      const res = await uni.$http.post('/index/list', {
        status: '2'
      });
      console.log('接单范围i', res.data.data);
      res.data.data.forEach((item) => {
        this.range.push({
          value: item.id,
          text: item.name
        });
      });
    },
    // 开关变化
    swichchange(e) {
      console.log(e);
      this.singly = e.detail.value ? '2' : '1';
      uni.setStorageSync('swich', this.singly);
      uni.$http
        .post('/teacher/singlySave', {
          singly: this.singly
        })
        .then((res) => {
          // console.log(res);
          if (res.data.code == 1 && this.singly == 2) {
            console.log(this.singly);

            uni.showToast({
              title: '已开启接单',
              icon: 'none'
            });
          } else {
            uni.showToast({
              title: '已关闭接单',
              icon: 'none'
            });
          }
        });
    },
    //  时间改变
    bindChange(e) {
      console.log(e.detail.value);
      this.currentvalue = e.detail.value;
      this.time_slot =
        this.starthours[this.currentvalue[0]] +
        ':' +
        this.startminutes[this.currentvalue[1]] +
        '-' +
        this.endhours[this.currentvalue[2]] +
        ':' +
        this.endminutes[this.currentvalue[3]];
    },
    // 点击确认
    async fnok() {
      console.log(this.currentvalue, this.currentindex1, this.currentindex2);
      if (this.currentvalue.length == 4) {
        // this.data[this.currentindex1].title
        // 有id就是新增=无id就是修改时间段
        if (!this.data[this.currentindex1].list[this.currentindex2].id) {
          this.data[this.currentindex1].list[this.currentindex2].time_slot =
            this.starthours[this.currentvalue[0]] +
            ':' +
            this.startminutes[this.currentvalue[1]] +
            '-' +
            this.endhours[this.currentvalue[2]] +
            ':' +
            this.endminutes[this.currentvalue[3]];

          this.week = this.currentindex1;
          this.$refs.time.close();
          console.log(this.distance, this.value);
          if (this.distance != '' || this.value != '') {
            const res = await uni.$http.post('/teacher/setup', {
              week: this.week,
              time_slot: this.time_slot,
              range: this.distance ? String(this.distance) : this.value
            });
            console.log('接单设置的结果', res);
          } else {
            uni.showToast({
              title: '请选择接单的范围',
              icon: 'none'
            });
          }
        } else {
          this.data[this.currentindex1].list[this.currentindex2].time_slot =
            this.starthours[this.currentvalue[0]] +
            ':' +
            this.startminutes[this.currentvalue[1]] +
            '-' +
            this.endhours[this.currentvalue[2]] +
            ':' +
            this.endminutes[this.currentvalue[3]];
          uni.$http
            .post('/teacher/setupEdit', {
              teacher_setup_id: this.data[this.currentindex1].list[this.currentindex2].id,
              time_slot: this.data[this.currentindex1].list[this.currentindex2].time_slot
            })
            .then((res) => {
              console.log('修改成功', res);
              this.$refs.time.close();
            });
        }
      }
    },
    // 修改时间
    changetime(index1, index2) {
      console.log(index1, index2);
      this.$refs.time.open();
      this.currentindex1 = index1;
      this.currentindex2 = index2;
    },
    // 增加时间段
    add(index) {
      console.log('时间段', index);
      this.data[index].list.push({
        time_slot: '00:00-00:00',
        delstatus: false
      });
    },
    // 长按显示删除时间按钮
    del(index1, index2) {
      console.log(index1, index2);
      this.data[index1].list[index2].delstatus = true;
      console.log(this.data[index1].list[index2]);
    },
    // 点击删除时间
    async deltime(index1, index2) {
      if (this.data[index1].list[index2].id) {
        await uni.$http.post('/teacher/setupDel', {
          teacher_setup_id: this.data[index1].list[index2].id
        });
      }
      this.data[index1].list.splice(index2, 1);
    },
    // 选择距离范围
    longchange(e) {
      console.log('距离范围--', e);
      if (e) {
        this.distance = this.range[e - 1].value;
        console.log(this.distance, '距离');
      }
    }
  },
  onLoad() {
    if (uni.getStorageSync('swich')) {
      this.singly = uni.getStorageSync('swich');
    }
    // 获取时间列表
    this.gettimelist();
    // 获取接单范围
    this.getdistance();
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  background-color: #fff;
  .choosetimebox {
    box-sizing: border-box;
    padding: 30rpx;
    width: 750rpx;
    height: 560rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    opacity: 1;
  }
  .swich {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750rpx;
    height: 120rpx;
    padding: 40rpx;
    background: #ffffff;
  }
  .item {
    box-sizing: border-box;
    width: 690rpx;
    margin: 30rpx;
    border-bottom: 4rpx solid #f1f1f1;
    .title {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .timebox {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding-bottom: 20rpx;
      .time {
        box-sizing: border-box;
        position: relative;
        width: 200rpx;
        height: 60rpx;
        margin-top: 16rpx;
        margin-right: 20rpx;
        text-align: center;
        line-height: 60rpx;
        background: rgba(53, 83, 232, 0.14);
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        border: 2rpx solid #3553e8;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #3553e8;
        .del {
          position: absolute;
          right: -20rpx;
          top: -30rpx;
        }
      }
    }
  }
  .long {
    box-sizing: border-box;

    width: 750rpx;

    padding: 40rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .submit {
    box-sizing: border-box;
    width: 690rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    background-color: #fff;
    color: #fff;
    border-radius: 100rpx;
    margin-left: 30rpx;
  }
  .longbox {
    width: 750rpx;
  }
}
</style>
